<template>
	<!-- 20230509 仅用于购物车产品 -->
	<view class="mall-cart-product-cn">
		<!-- 组件内容 -->
		<view class="cn-content">

			<!-- 有效商品 -->
			<view class="padding-tb-10 radius-15 bg-ff" v-if="cartEffective.length">

				<!-- 插槽 -->
				<slot></slot>

				<!-- 有效商品 -->
				<view class="padding-tb-30 padding-lr-20 flex align-center radius-15 bg-ff bg-shadow margin-bottom-30"
					v-for="(item,index) in cartEffective" :key="index"
					@click="go('/pages/mall/detail?id='+item.product_id)">

					<!-- 选中图标 -->
					<view class="choose-btn text-center" @click.stop="choose(index)">
						<text class="text-40"
							:class="item.is_select == 0 ? 'tyIcon-round text-cc' : 'tyIcon-round-check text-1a'">
						</text>
					</view>

					<!-- 产品 -->
					<view class="margin-left-10 flex-one flex align-center">
						<!-- 图片 -->
						<image class="jc-image-180 radius-10" :src="item.memproduct.image" mode="aspectFill">
						</image>

						<view class="margin-left-20 flex-one">
							<!-- 名称 -->
							<view class="flex align-center justify-between">
								<view class="line-height-40 text-28 text-33 text-cut-one">{{item.Specs}}</view>
								<text class="text-30 text-red">¥{{item.memproduct.price}}</text>
							</view>
							<!-- 规格 -->



							<view class="margin-top-70 flex align-center justify-between">
								<!-- 价钱 -->
								<view class="line-36 text-cut-one text-24 text-77">
									规格：{{item.memproduct.name}}
								</view>
								<!-- 数量 -->
								<ty-text-stepper :value="item.num" :async-change="async" :identifier="index"
									:input-width="70" @change="change">
								</ty-text-stepper>
							</view>
						</view>
					</view>

				</view>
			</view>

			<!-- 失效商品 -->
			<view class="margin-top-20 margin-lr-30 padding-bottom-20 padding-lr-20 radius-10 bg-ff"
				v-if="cartInvalid.length">
				<!-- 统计和操作 -->
				<view class="padding-top-30 flex align-center justify-between" style="padding-left: 60rpx;">
					<view class="text-26">失效宝贝{{cartInvalid.length}}件</view>
					<view class="text-26 text-main" @click="clear">清空失效宝贝</view>
				</view>

				<!-- 失效商品 -->
				<view class="grey-block">
					<view class="padding-tb-30 flex align-center" v-for="(item,index) in cartInvalid" :key="index">
						<!-- 失效图标 -->
						<view class="choose-btn text-center">
							<view class="width-40 height-40 radius-50p bg-cc" style="border: 2rpx solid #aaa"></view>
						</view>

						<view class="margin-left-10 flex-one flex align-center">
							<!-- 图片 -->
							<image class="jc-image-180 radius-10" :src="item.product_cover_img" mode="aspectFill">
							</image>

							<view class="margin-left-20 padding-right-20 flex-one">
								<!-- 名称 -->
								<view class="line-height-40 text-28 text-33 text-cut-one">{{item.product_name}}</view>

								<!-- 规格 -->
								<view class="margin-top-5 line-36 height-72 text-24 text-77 text-cut-two">
									{{item.product_sku_name}}
								</view>

								<view class="margin-top-25 flex align-center justify-between">
									<!-- 价钱 -->
									<text class="text-30 text-main">¥{{item.product_price}}</text>
								</view>

							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 组件浮层 -->
		<view class="cn-layer">

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			cartEffective: {
				type: Array,
				default: []
			},
			cartInvalid: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				async: true
			}
		},
		methods: {
			//选中/取消选中产品
			choose(index) {
				this.$emit('choose', {
					index: index
				})
			},
			//清空失效宝贝
			clear() {
				this.$emit('clear')
			},
			//更改数量
			change(e) {
				this.$emit('change', {
					type: e.type,
					number: e.number,
					identifier: e.identifier
				})
			}
		}
	}
</script>

<style scoped>
	/* 置灰失效商品列表 */
	.grey-block {
		opacity: 0.5;
	}

	/* 选择按钮 */
	.choose-btn {
		width: 40rpx;
	}
</style>